<template>
  <div style="height: 523px; overflow: hidden; background: white; border:1px solid white ; border-radius: 12px;margin-top:10px ">
   <!-- <el-row>
      <el-col :span="24">
        库存管理--入库管理--入库查询
        <el-breadcrumb style="width:500px; font-size: 13px; margin-top: 10px; margin-left: 10px; "
          separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>库存管理</el-breadcrumb-item>
          <el-breadcrumb-item>入库管理</el-breadcrumb-item>
          <el-breadcrumb-item style="color: 000000;">入库查询</el-breadcrumb-item>
          <el-button style="position: absolute; right: 26px; top:3px;" type="primary" size="mini"  @click=" dialog = true "round>库房状态查询</el-button>
        </el-breadcrumb>
      </el-col>
    </el-row> -->
<!--    <el-button style="position: absolute; right: 26px; top:3px;" type="primary" size="mini"  @click=" dialog = true "round>库房状态查询</el-button>
 -->
    <div style="text-align: left ;font-size: 14px;background-color: #E9EEF3; height: 95px; margin: 10px; padding: 4px; border-radius: 7px;">
     <el-row style="padding: 10px; line-height: 21px;">
      <el-col :sapn="24">
         <p>符合条件的入库单总数：17例 </p>
      </el-col>
      <el-col :sapn="10">
         <p style="color: red">其中等待执行的入库单总数：11例</p>
      </el-col>
      <el-col :sapn="10">
         <p style="color: green;">其中正在执行的入库单总数：0例</p>
      </el-col>
      <el-col :sapn="10">
         <p style="color: blue;">其中完成的入库单总数：6例</p>
      </el-col>
     </el-row>

    </div>
    <div style="background-color: #E9EEF3; height: 346px; margin: 10px; padding: 4px; border-radius: 7px;">
      <template>
         <el-table
           :data="tableData"
           style="width: 100% ">
           <el-table-column
             prop="repjingid"
             label="入申请单编号"
             width="320">
           </el-table-column>
           <el-table-column
             prop="reason"
             label="入库理由"
             width="150">
           </el-table-column>
           <el-table-column
             prop="timekc"
             label="完成时间"
             width="145">
           </el-table-column>
           <el-table-column
             prop="rukuchuliang"
             label="应入总件数"
             width="150">
           </el-table-column>
           <el-table-column
             prop="rukuzonshuliang"
             label="已入库总件数"
             width="150">
           </el-table-column>
           <el-table-column label="查看" width="100">
           <template slot-scope="scope">
                <el-button size="mini" @click.native.prevent="fh(scope.row)" round>查看</el-button>
           </template>
          </el-table-column>


         </el-table>
       </template>

         <div class="block" style="margin-top: 2px;">
           <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="14"
             :page-sizes="[100, 200, 300, 400]"
             :page-size="100"
             layout="total, sizes, prev, pager, next, jumper"
             :total="400">
           </el-pagination>
         </div>
    </div>


    <el-drawer
      title=""
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"

      >
      <div class="demo-drawer__content" style="background-color: whitesmoke; padding: 10px;">
        <el-form :model="form">
          <el-form-item label="申请单编号" :label-width="formLabelWidth" style="margin-bottom: 18px;margin-right: 45px;">
                <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="申请单状态" :label-width="formLabelWidth"  style="margin-bottom: 18px;margin-right: 45px;">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="等待" value="等待"></el-option>
              <el-option label="执行" value="执行"></el-option>
              <el-option label="完成" value="完成"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="III级分类" :label-width="formLabelWidth"  style="margin-bottom: 18px;margin-right: 45px;">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请选择产品" :label-width="formLabelWidth"  style="margin-bottom: 18px;margin-right: 45px;">
             <div class="block">
                <span class="demonstration">默认</span>
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button style="height: 25px; width: 45px;"   @click="cancelForm">取 消</el-button>
          <el-button style="height: 25px; width: 45px; background-color: #C0C4CC;" type="infor"  @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>


<el-dialog style="position: absolute; top: -78px;" title="入库登记复核6g" :visible.sync="dialogVisible" width="90%"
				  :before-close="handleClose">
				  <el-table :data="tableDataa" size="mini">
				    <el-table-column property="cpbh" label="产品编号" width="180"></el-table-column>
						<el-table-column property="cpmc" label="产品名称" width="190"></el-table-column>
				    <el-table-column property="reason" label="库房名称" width="190"></el-table-column>
						<el-table-column property="pronameClass" label="存储地址名称" width="160"></el-table-column>
				    <el-table-column property="rukuchuliang" label="应入库件数" width="160"></el-table-column>
				    <el-table-column property="yiwcrukushukliang" label="已入库件数" width="160"></el-table-column>
				  </el-table>
				  <div class="block" style="margin-top: 14px;">
				    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				      :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
				      layout="total, sizes, prev, pager, next, jumper" :total="400">
				    </el-pagination>
				  </div>
				  <span slot="footer" class="dialog-footer">
				    <el-button @click="dialogVisible = false">取 消</el-button>
				    <el-button type="primary" @click="rukuupd">确 定</el-button>
				  </span>
				</el-dialog>

  </div>
</template>

<script>
  export default {
    name: 'repoutsel',
    data() {
      return {
        tableData: [],
				tableDataa: [],
				dialogVisible:false,
        table: false,
              dialog: false,
              loading: false,
              gridData: [],
              form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
              },
              formLabelWidth: '90px',
              timer: null,
                      pickerOptions: {
                        shortcuts: [{
                          text: '最近一周',
                          onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                          }
                        }, {
                          text: '最近一个月',
                          onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                          }
                        }, {
                          text: '最近三个月',
                          onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                          }
                        }]
                      },
                      value1: '',
                      value2: ''

      }
    },
		mounted(){
			this.$http.post("seldjyifhRepadmin")
			.then((res) => {
							 this.tableData=res.data;
					})
					.catch((err) => { //请求失败
				console.log(err);
			});
		}
		,
    methods: {
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
       handleClose(done) {
            if (this.loading) {
              return;
            }
            this.$confirm('确定要提交表单吗？')
              .then(_ => {
                this.loading = true;
                this.timer = setTimeout(() => {
                  done();
                  // 动画关闭需要一定的时间
                  setTimeout(() => {
                    this.loading = false;
                  }, 400);
                }, 2000);
              })
              .catch(_ => {});
          },
          cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
          },
					fh(row){
						this.dialogVisible=true;
						var demo=new URLSearchParams()
						demo.append("pid",row.pid)
						this.$http.post("seliddjyifhRepadmin",demo)
						.then((res)=>{
							this.tableDataa=res.data;
						})
						.catch((err)=>{ //请求失败
									console.log(err);
						})


					},
					rukuupd(){
							this.tableDataa.forEach(item=>{
								 var demo=new URLSearchParams()
								demo.append("reprkdbh",item.cpbh)
								demo.append("repcpmc",item.cpmc)
								demo.append("repcrxq",'入库')
								demo.append("repIjfl",item.pyj)
								demo.append("repIIjfl",item.pej)
								demo.append("repqckc",item.rukuzonshuliang)
								demo.append("reprkxj",item.rukuxiaoji)
								demo.append("repckxj",0)
								demo.append("repchurushuliang",item.yiwcrukushukliang)
								demo.append("repqmkc",item.rukuzonshuliang)
								this.$http.post("insRepchurukudontai",demo)
								.then((res)=>{
												this.dialogVisible=false;
								})
								.catch((err)=>{ //请求失败
											console.log(err);
								})
							})

					}
    }
  }
</script>

<style scoped="scoped">
  * {
    padding: 0px;
    margin: 0px;
  }

  .el-breadcrumb__inner {
    color: black;

  }
  .el-input__inner {

    height: 25px;

  }

  .el-input__prefix,
  .el-input__suffix {
    position: absolute;
    top: 7px;
    -webkit-transition: all .3s;
    height: 100%;
    color: #C0C4CC;
    text-align: center;
  }
  .el-table td{
      padding: 10px 0;
  }

  .el-input__inner {
      height: 28px;
  }
</style>
